<template>
    <div>
        <el-row>
            <el-col :span="4" v-for="(data,index) in data_list" :key="index">
                <el-card :body-style="{ padding: '0px' }">
                    <img :src="data.url"
                         class="image" style="vertical-align:middle">
                    <div style="padding: 14px;">
                        <div class="bottom clearfix">
                            <p class="p_text">{{data.apiresult}}</p>
                            <time class="time">{{ data.created_time }}</time>
                            <el-button type="text" class="button" @click="checkDetail(data.apiresult,data.url,data.id)">
                                操作按钮
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog
                style="line-height: normal"
                title="识别详情"
                :visible.sync='contentVisible'
                width="40%">
            <img :src="url"
                 class="dialog_image" style="vertical-align:middle">
            <p class="p_all">{{content}}</p>
            <span slot="footer" class="dialog-footer">
      <el-button @click="contentVisible = false">确定</el-button>
                <el-button @click="deleteitem(id)">删除</el-button>
    </span>
        </el-dialog>
    </div>

</template>

<script>
    import fetch from '../api/fetch'

    export default {
        name: "History",
        data() {
            return {
                data_list: [],
                content: '',
                contentVisible: false,
                url: '',
                id: ''
            };
        },
        created() {
            this.get_history()
        },
        methods: {
            checkDetail(apiresult, url, id) {
                this.contentVisible = true;
                // console.log(apiresult)
                this.content = apiresult;
                this.url = url
                this.id = id

            },
            deleteitem(id) {
                console.log(id)
                this.$message({
                    message: "删除成功",
                    type: 'danger'
                })
                this.contentVisible = false

            },
            get_history() {
                fetch
                    .history()
                    .then(res => {
                        if (res.data.status === 200) {
                            var results = res.data.results;
                            if (results.length > 0) {
                                this.data_list = results

                            }
                            else {
                                this.$message({
                                    message: "你还未有任何识别记录",
                                    type: 'danger'
                                })

                            }
                        }
                    })
                    .catch(e => {
                        console.log(e)

                    })
            }

        }

    }
</script>

<style scoped>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        height: 150px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .p_text {
        line-height: normal;
        height: 40px;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .p_all {
        line-height: normal;
        text-align: left;
    }

    .dialog_image {
        padding-left: 20%;
        padding-top: 10px;
        height: 200px;
        display: block;
    }

</style>